<template>
  <div class="user-management-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button
          :icon="Plus"
          type="primary"
          @click="handleEdit(null, 'default')"
        >
          添加
        </el-button>
        <!-- <el-button :icon="Delete" type="danger" @click="handleDelete($event)">
              批量删除
            </el-button> -->
      </vab-query-form-left-panel>
    </vab-query-form>

    <el-table v-loading="listLoading" :data="list" border row-key="id">
      <el-table-column label="路由名称" prop="name" show-overflow-tooltip />
      <el-table-column
        align="center"
        label="api"
        prop="api_path"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="权限编码"
        prop="web_permission"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="类型" prop="auth_type">
        <template #default="{ row }">
          <el-tag
            :type="
              row.auth_type == 1
                ? 'success'
                : row.auth_type == 2
                  ? 'primary'
                  : ''
            "
          >
            {{ row.auth_type == 1 ? '菜单' : row.auth_type == 2 ? '按钮' : '' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序" prop="sort" width="80" />
      <el-table-column
        align="center"
        label="操作"
        show-overflow-tooltip
        width="300"
      >
        <template #default="{ row }">
          <el-button text type="primary" @click="handleEdit(row, 'edit')">
            编辑
          </el-button>
          <el-button text type="warning" @click="handleEdit(row, 'subLevel')">
            添加下级
          </el-button>
          <el-button text type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>

    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { doDelete, getList } from '@/api/permission'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'Permission',
    components: {
      Edit: defineAsyncComponent(
        () => import('./components/adminPermissionEdit')
      ),
    },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        editRef: null,
        list: [],
        listLoading: true,
        selectRows: '',
        queryForm: {},
        addType: '',
      })
      const handleEdit = (row, type) => {
        state['editRef'].showEdit(row, type)
      }

      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ id: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        }
      }
      const queryData = () => {
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const { data } = await getList(state.queryForm)
        state.list = data
        state.listLoading = false
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        handleEdit,
        handleDelete,
        queryData,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
